<style lang="less">
	.my {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.box {
			width: 100%;
			overflow: hidden;
			background-color: #27130c;
			height: 50%;
			position: relative;
			padding-bottom: 25%;

			.container {
				width: 92%;
				margin: 0 auto;
				text-align: center;
				position: relative;
				z-index: 600;

				.avatar {
					width: 30%;
					margin: 0 auto;
					margin-top: 80px;

					img {
						width: 100%;
						border-radius: 50%;
					}
				}

				.nickName {
					color: #fefefe;
					font-size: 20px;
					margin-top: 15px;
				}

				.row1 {
					width: 70%;
					margin: 0 auto;
					margin-top: 10px;
					display: flex;
					justify-content: space-between;
					color: #ccc;
					font-size: 12px;

					.num {
						font-size: 16px;
						color: #fefefe;
						margin-right: 5px;
					}
				}

				.row2 {
					width: 100%;
					margin: 0 auto;
					margin-top: 20px;
					display: flex;
					justify-content: space-between;

					div {
						width: 20%;
						border-radius: 6px;
						height: 30px;
						line-height: 30px;
						background-color: rgba(255, 255, 255, .3);
						position: relative;

						img {
							width: 30%;
							// position: absolute;
							margin-bottom: 5px;
						}

						span {
							color: #cccccc;
							margin-left: 3px;
						}
					}

					.recent {
						img {
							width: 28%;
						}
					}

					.networkDisk {
						img {
							width: 34%;
						}
					}

					.apply {
						width: 10%;

						img {
							width: 50%;
							margin-top: 3px;
						}
					}
				}



			}
		}

		.list {
			width: 100%;
			background-color: rgba(255, 255, 255, 1);
			border-top-right-radius: 10px;
			border-top-left-radius: 10px;
			position: absolute;
			top: 55%;

			.container {
				width: 92%;
				margin: 0 auto;
				margin-top: 10px;
				div {
					width: 100%;
					position: relative;
					// margin-top: 15px;
					padding-top: 5px;
					padding-bottom: 5px;
					// background-color: skyblue;
					// overflow: hidden;

					.img {
						width: 20%;
						// position: absolute;

						img {
							width: 100%;
							border-radius: 5px;
						}

					}
					.text{
						position: absolute;
						left: 25%;
						top: 10px;
						.title {
							font-size: 18px;
						}
						
						.aside {
							color: #aaaaaa;
							font-size: 14px;
							margin-bottom: 5px;
						}
					}
					

					.icon {
						position: absolute;
						left: 90%;
						top: 25px;
						// transform: rotate(90deg);
					}
				}
			}
		}
	}
</style>

<template>
	<view class="my">
		<my-top></my-top>
		<div class="box">
			<div class="container">
				<div class="avatar">
					<img src="../../static/avatar.jpg" alt="" />
				</div>
				<div class="nickName">
					<span>用户3306</span>
				</div>
				<div class="row1">
					<div class="content">
						<span class="num">1</span>
						<span>关注</span>
					</div>
					<div class="content">
						<span class="num">0</span>
						<span>粉丝</span>
					</div>
					<div class="content">
						<span class="num">Lv.1</span>
						<span>等级</span>
					</div>
					<div class="content">
						<span class="num">2时</span>
						<span>听歌</span>
					</div>
				</div>
				<div class="row2">
					<div class="recent">
						<img src="../../static/recent.png" alt="" />
						<span>最近</span>
					</div>
					<div class="locol">
						<img src="../../static/locol.png" alt="" />
						<span>本地</span>
					</div>
					<div class="networkDisk">
						<img src="../../static/dask.png" alt="" />
						<span>网盘</span>
					</div>
					<div class="dress">
						<img src="../../static/dress.png" alt="" />
						<span>装扮</span>
					</div>
					<div class="apply">
						<img src="../../static/apply.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="list">
			<div class="container">
				<div class="love" @click="toCollect">
					<div class="img">
						<img src="../../static/love.png" alt="" />
					</div>
					<div class="text">
						<div class="title">
							<span>我喜欢的音乐</span>
						</div>
						<div class="aside">
							<span>0 首</span>
						</div>
					</div>

					<div class="icon">
						<uni-icons type="more-filled" size="30" color="#aaaaaa"></uni-icons>
					</div>
				</div>
				<div class="rank">
					<div class="img">
						<img src="../../static/rank.png" alt="" />
					</div>
					<div class="text">
						<div class="title">
							<span>听歌排行</span>
						</div>
						<div class="aside">
							<span>累计听歌37首</span>
						</div>
					</div>

					<div class="icon">
						<uni-icons type="more-filled" size="30" color="#aaaaaa"></uni-icons>
					</div>
				</div>
				<div class="addMeau">
					<div class="img">
						<img src="../../static/addMeau.png" alt="" />
					</div>
					<div class="text">
						<div class="title">
							<span>新建歌单</span>
						</div>
						<div class="aside">
							<span></span>
						</div>
					</div>

					<div class="icon">
						<uni-icons type="more-filled" size="30" color="#aaaaaa"></uni-icons>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import myTop from '../../components/myTop.vue';
	export default {
		components: {
			myTop
		},
		data() {
			return {

			};
		},
		methods:{
			toCollect(){
				uni.navigateTo({
					url:'/pages/collect/collect'
				})
			}
		}
	}
</script>